<template>
	<view>
		<view class="container">
			<view class="item" v-for="(item, index) in listData" :key="index" @click="toLink(item)">
				<view class="ico"><image :src="item.val"></image></view>
				<text class="text">{{ item.key }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			listData: [
				{
					key: '美食',
					val: 'http://imgv.bawangdao.com/static/image/index/list-1.png',
					link: '/pages/index/delicious-food'
				},
				{
					key: '娱乐',
					val: 'http://imgv.bawangdao.com/static/image/index/list-2.png',
					link: '/pages/login/login'
				},
				{
					key: '休闲',
					val: 'http://imgv.bawangdao.com/static/image/index/list-3.png',
					link: '/pages/login/login'
				},
				{
					key: '饮品',
					val: 'http://imgv.bawangdao.com/static/image/index/list-4.png',
					link: '/pages/login-wx/login-wx'
				},
				{
					key: '购物',
					val: 'http://imgv.bawangdao.com/static/image/index/list-5.png',
					link: '/pages/login-wx/login-wx'
				}
			]
		};
	},
	methods: {
		toLink(item) {
			if (item.link) {
				uni.navigateTo({
					url: item.link
				});
			} else {
				uni.showToast({
					title: '暂未开发',
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
};
</script>

<style lang="less">
.container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	// height: 200rpx;
	margin: 20rpx 30rpx;
	border-radius: 20rpx;
	background: #ffffff;
	.item {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: 20rpx 0rpx 20rpx 0rpx;
		.ico {
			width: 90rpx;
			height: 90rpx;
			image {
				width: 90rpx;
				height: 90rpx;
			}
		}
		.text {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			font-family: PingFangSC-Regular, PingFang SC;
		}
	}
}
</style>
